<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>修改场景的天空盒</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        'use strict';
        //定义三维视图的主要类
        var webGlobe;
        //地图初始化函数
        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {
                terrainExaggeration: 1,
            });
        }

        function change() {
            //初始化视图功能管理类
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            var skybox = new Cesium.SkyBox({
                sources: {
                    positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/front.jpg',
                    negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/back.jpg',
                    positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/left.jpg',
                    negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/right.jpg',
                    positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/top.jpg',
                    negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/bottom.jpg'
                }
            });
            sceneManager.changeSkyBox(skybox);
        }
    </script>
</head>

<body onload="init()">
    <div id="GlobeView">
        <div class="message">
            <button onclick="change()">切换天空盒</button>
        </div>
    </div>
</body>

</html>